<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-tickets"></i> 用户信息管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-row class="button-row">
            <el-button class="table-button" type="primary" @click="handleAdd()">新增</el-button>
            </el-row>
            <el-table :data="tableData" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
                <el-table-column prop="upid" label="ID" width="80">
                </el-table-column>
                <el-table-column prop="privilege" label="权限位">
                </el-table-column>
                <el-table-column prop="privilegeName" label="权限名">
                </el-table-column>
                <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
                </el-table-column>
            </el-table>
        </div>


        <!-- 编辑弹出框 -->
        <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
            <el-form ref="editForm" :model="editForm" label-width="80px">
                <el-form-item label="权限位">
                    <el-input v-model="editForm.privilege"></el-input>
                </el-form-item>
                <el-form-item label="权限名" >
                    <el-input v-model="editForm.privilegeName"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="editFormData">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 删除提示框 -->
        <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 新增弹出框 -->
        <el-dialog title="新增" :visible.sync="addVisible" width="30%" @close="closeDialog">
            <el-form ref="addForm" :model="addForm" label-width="80px">
                <el-form-item label="权限位" prop='privilege'>
                    <el-input v-model="addForm.privilege"></el-input>
                </el-form-item>
                <el-form-item label="权限名" prop='privilegeName'>
                    <el-input v-model="addForm.privilegeName"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeDialog">取 消</el-button>
                <el-button type="primary" @click="addFormData">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
         getUserPrivilegeList,
         addUserPrivilege,
         deleteUserPrivilege,
         updateUserPrivilege
        } from "../../utils/api/privilege";
import store from "../../store";
export default {
  name: "usertable",
  data() {
    return {
      tableData: [], //列表数据
      multipleSelection: [], //选中索引
      is_search: false,
      addVisible: false, //新增弹出框
      editVisible: false, //编辑弹出框
      delVisible: false, //删除弹出框
      editForm: {
        //修改弹出框数据
        upid: "",
        privilege: "",
        privilegeName: ""
      },
      addForm: {
        //新增弹出框数据
        upid: "",
        privilege: "",
        privilegeName: ""
      },
      delelteData: {
        upid: ""
      },
      idx: -1
    };
  },
  created() {
    this.getData();
  },
  methods: {
    /** 获取列表数据 */
    getData() {
      getUserPrivilegeList().then(res => {
        this.tableData = res.data.rows;
      });
    },

    /** 编辑弹出框 保存数据 */
    editFormData() {
      updateUserPrivilege(this.editForm).then(res => {
        if (res.data.code != "success") {
          this.$message({
            //UI 消息框
            message: res.data.message,
            center: true
          });
        } else {
          this.getData();
        }
        this.editVisible = false;
      });
    },

    addFormData() {
      if(isNaN(this.addForm.privilege)){
        this.$message({
            //UI 消息框
            message: "权限位请输入数字",
            center: false
          });
          return;
      }
      addUserPrivilege(this.addForm).then(res => {
        if (res.data.code != "success") {
          this.$message({
            //UI 消息框
            message: res.data.message,
            center: true
          });
        } else {
          this.getData();
        }
        this.addVisible = false;
      });
    },

    /** 删除单行 */
    deleteRow() {
      deleteUserPrivilege(this.delelteData).then(res => {
        if (res.data.code != "success") {
          this.$message({
            //UI 消息框
            message: res.data.message,
            center: true
          });
        } else {
          this.getData();
          this.delVisible = false;
          this.$message.success("删除成功");
        }
      });
    },

    /** 编辑框传递数据 */
    handleEdit(index, row) {
      this.idx = index;
      const item = this.tableData[index];
      this.editForm = {
        upid: item.upid,
        privilege: item.privilege,
        privilegeName: item.privilegeName
      };
      this.editVisible = true;
    },

    handleAdd() {
      this.addVisible = true;
    },

    handleDelete(index, row) {
      this.delelteData.upid = row.upid;
      this.delVisible = true;
    },

    /** 获取选中索引 */
    handleSelectionChange(val) {
      let ids = [];
      val.forEach(element => {
        ids.push(element.id);
      });
      this.multipleSelection = ids;
    },
    closeDialog(){
      this.$refs['addForm'].resetFields();
      this.addVisible = false;
    }
  }
};
</script>

<style scoped>
.table-button {
  width: 110px;
  font-size: 18px;
  text-align: center;
}
.button-row {
  margin-bottom: 10px;
}
.el-select.filter-item.el-select--small {
  width: 100%;
}
</style>
